<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="./css/mui.min.css" rel="stylesheet" />
		<!-- <link rel="stylesheet" type="text/css" href="./css/app.css" /> -->
		<!-- <link href="./css/mui.imageviewer.css" rel="stylesheet" /> -->
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}

			footer {
				position: fixed;
				width: 100%;
				height: 50px;
				min-height: 50px;
				border-top: solid 1px #bbb;
				left: 0px;
				bottom: 0px;
				overflow: hidden;
				padding: 0px 50px;
				background-color: #fafafa;
			}

			.footer-left {
				position: absolute;
				width: 50px;
				height: 50px;
				left: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 4px;
			}

			.footer-right {
				position: absolute;
				width: 50px;
				height: 50px;
				right: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 5px;
				display: inline-block;
			}

			.footer-center {
				height: 100%;
				padding: 5px 0px;
			}

			.footer-center [class*=input] {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}

			.footer-center .input-text {
				background: #fff;
				border: solid 1px #ddd;
				padding: 10px !important;
				font-size: 16px !important;
				line-height: 18px !important;
				font-family: verdana !important;
				overflow: hidden;
			}

			.footer-center .input-sound {
				background-color: #eee;
			}

			.mui-content {
				height: 100%;
				padding: 44px 0px 50px 0px;
				overflow: auto;
				/* background-color: #eaeaea; */
			}

			/* 			#msg-list {
				height: 100%;
				overflow: auto;
				-webkit-overflow-scrolling: touch;
			} */
			/* 	.msg-item {
				padding: 8px;
				clear: both;
			} */
			/* 		.msg-item .mui-item-clear {
				clear: both;
			} */
			/* .msg-item .msg-user {
				width: 38px;
				height: 38px;
				border: solid 1px #d3d3d3;
				display: inline-block;
				background: #fff;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				padding: 3px;
				color: #ddd;
			}
			
			.msg-item .msg-user-img{
				width: 38px;
				height: 38px;
				display: inline-block;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				color: #ddd;
			}
			
			.msg-item .msg-content {
				display: inline-block;
				border-radius: 5px;
				border: solid 1px #d3d3d3;
				background-color: #FFFFFF;
				color: #333;
				padding: 8px;
				vertical-align: top;
				font-size: 15px;
				position: relative;
				margin: 0px 8px;
				max-width: 75%;
				min-width: 35px;
				float: left;
			}
			.msg-item .msg-content .msg-content-inner {
				overflow-x: hidden;
			}
			.msg-item .msg-content .msg-content-arrow {
				position: absolute;
				border: solid 1px #d3d3d3;
				border-right: none;
				border-top: none;
				background-color: #FFFFFF;
				width: 10px;
				height: 10px;
				left: -5px;
				top: 12px;
				-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
			.msg-item-self .msg-user,
			.msg-item-self .msg-content {
				float: right;
			}
			.msg-item-self .msg-content .msg-content-arrow {
				left: auto;
				right: -5px;
				-webkit-transform: rotateZ(225deg);
				transform: rotateZ(225deg);
			}
			.msg-item-self .msg-content,
			.msg-item-self .msg-content .msg-content-arrow {
				background-color: #4CD964;
				color: #fff;
				border-color: #2AC845;
			} */
			footer .mui-icon {
				color: #000;
			}

			footer .mui-icon:active {
				color: #007AFF !important;
			}

			footer .mui-icon-paperplane:before {
				content: "发送";
			}

			footer .mui-icon-paperplane {
				/*-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);*/

				font-size: 16px;
				word-break: keep-all;
				line-height: 100%;
				padding-top: 6px;
				color: rgba(0, 135, 250, 1);
			}

			#msg-sound {
				-webkit-user-select: none !important;
				user-select: none !important;
			}

			/* .rprogress {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 140px;
				height: 140px;
				margin-left: -70px;
				margin-top: -70px;
				background-image: url(../images/arecord.png);
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 30px 30px;
				background-color: rgba(0, 0, 0, 0.7);
				border-radius: 5px;
				display: none;
				-webkit-transition: .15s;
			} */
			/* .rschedule {
				background-color: rgba(0, 0, 0, 0);
				border: 5px solid rgba(0, 183, 229, 0.9);
				opacity: .9;
				border-left: 5px solid rgba(0, 0, 0, 0);
				border-right: 5px solid rgba(0, 0, 0, 0);
				border-radius: 50px;
				box-shadow: 0 0 15px #2187e7;
				width: 46px;
				height: 46px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -23px;
				margin-top: -23px;
				-webkit-animation: spin 1s infinite linear;
				animation: spin 1s infinite linear;
			} */
			/* .r-sigh{
				display: none;
				border-radius: 50px;
				box-shadow: 0 0 15px #2187e7;
				width: 46px;
				height: 46px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -23px;
				margin-top: -23px;
				text-align: center;
				line-height: 46px;
				font-size: 40px;
				font-weight: bold;
				color: #2187e7;
			}
			.rprogress-sigh{
				background-image: none !important;
			}
			.rprogress-sigh .rschedule{
				display: none !important;
			}
			.rprogress-sigh .r-sigh{
				display: block !important;
			}
			.rsalert {
				font-size: 12px;
				color: #bbb;
				text-align: center;
				position: absolute;
				border-radius: 5px;
				width: 130px;
				margin: 5px 5px;
				padding: 5px;
				left: 0px;
				bottom: 0px;
			} */
			/* @-webkit-keyframes spin {
				0% {
					-webkit-transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
				}
			}
			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			} */
			/* #h {
				background: #fff;
				border: solid 1px #ddd;
				padding: 10px !important;
				font-size: 16px !important;
				font-family: verdana !important;
				line-height: 18px !important;
				overflow: visible;
				position: absolute;
				left: -1000px;
				right: 0px;
				word-break: break-all;
				word-wrap: break-word;
			} */
			/* 	.cancel {
				background-color: darkred;
			} */

			/* .right-my{
				width: 300px;
				background-color: #323232;
				margin-right: 40px;
				border-radius: 6px;
				
			} */
		</style>

		<script src="js/mui.js"></script>
		<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
		<script src="./utils/myRequest.js"></script>
		<script type="text/javascript">
			mui.init();

			mui.plusReady(function() {
			//获取页面参数
			var nickname = plus.webview.currentWebview().nickname;
			document.getElementById("nickname").innerHTML = nickname;
			//获取用户对象
			var user = store.getItem();

			//获取用户名称
			var username = user.nickname;

			// $(function (){
			var webSocket;
			// alert($("#username").val())
			// var username = document.getElementById('username').value;
			// console.log(username)
			if ("WebSocket" in window) {
				webSocket = new WebSocket("ws://192.168.2.216:8160/websocket/" + username);
					//联通之后回调时间encodeURIComponent(document.getElementById('username').value))
					webSocket.onopen = function() {
						console.log("websocket建立连接");
						// setMessageInnerHTML("与后台WebSocket服务建立连接");
					}
					//接收后台服务端的消息
					webSocket.onmessage = function(evt) {
						var receive_msg = evt.data;
						console.log("接收后台服务端的消息: " + evt.data);
						var obj = JSON.parse(receive_msg);
						console.log("解析后台服务端的消息: " + obj);

						//自定义规则
						//messageType = 1代表上线 ，2代表下线，3代表在线名单，4代表普通消息

						//判断是普通消息还是系统消息
						if (obj.messageType == 1) {
							//把名称放入到selection当中供选择
							var onLineName = obj.username;
							//提示用户谁上线了
							setMessageInnerHTML(onLineName + "上线了!!");

						} else if (obj.messageType == 2) {
							//表示有用户下线，首先先清空下拉款里面的值，然后再更换新的数据到下拉款中
							//获取下线的用户名称
							// var offLineName = obj.username;

							//通知用户下线
							// setMessageInnerHTML(offLineName + "下线了!!");

						
						} else if (obj.messageType == 3) {

						} else {
							//表示系统消息

							//判断，如果推送回来的是自己的消息就没必要输出了
							//如果发送者和登录的用户名相同，那就没必要显示出来
							if (!(username == obj.fromUsername)) {
								
								var html = "<div class=\"mui-pull-left\">\n" +
											"<img username=\""+user.username+"\" style=\"width: 40px;height: 40px;\" class=\"mui-media-object mui-pull-left\" src=\""+obj.fromImg+"\">\n" +
											"<div class=\"mui-media-body\">\n" +
											"<p style=\"color: #6D6D72;font-weight: bold;text-align: left;\">\n" +
											obj.fromUsername + "说:\n" +
											"<p style=\"width: 300px;background-color: #323232;margin-left: 40px;border-radius: 6px;\">\n"  +
											obj.textMessage + "\n" +
											"</div>\n" +
											"</div>"; 
											
								//接收数据
								var hml = document.getElementById("msg-list").innerHTML;
								//数据追加
								document.getElementById("msg-list").innerHTML = hml + html;
								
							}

						}

					}
					//连接关闭的回调事件
					webSocket.onclose = function() {
						console.log("与websocket连接已关闭!! ");

						// setMessageInnerHTML("与websocket连接已关闭!! ")
					}
				}
				else {
					alert("浏览器不支持WebSocket!! ");
				}
				//往页面输出内容的方法
				function setMessageInnerHTML(innerHTML) {
					//发送数据
					var hml = document.getElementById("msg-list").innerHTML;
					var html = "<p style=\"text-align: center;\">\n" + innerHTML + "</p>";
					//数据追加
					document.getElementById("msg-list").innerHTML = hml + html;
				}

				//发送聊天
				document.getElementById("msg-sound").addEventListener("tap", function() {
					//获取文本值
					var msg = document.getElementById("msg-text").value;
					var html = "";
					if(user.minHeand != null){
						html += "<div class=\"mui-pull-right\">\n" +
							"<img style=\"width: 40px;height: 40px;\" class=\"mui-media-object mui-pull-right\" src=\""+user.minHeand+"\">\n" +
							"<div class=\"mui-media-body\">\n" +
							"<p style=\"color: olive;font-weight: bold;text-align: right;\">\n" +
							username + "\n" +
							"<p style=\"width: 300px;background-color: #4CD964;text-align: right;margin-right: 40px;border-radius: 6px;\">\n" +
							msg + "\n" +
							"</p>\n" +
							"</div>\n" +
							"</div>";
					}else{
						html = "<div class=\"mui-pull-right\">\n" +
							"<img style=\"width: 40px;height: 40px;\" class=\"mui-media-object mui-pull-right\" src=\"./img/tou.jpg\">\n" +
							"<div class=\"mui-media-body\">\n" +
							"<p style=\"color: olive;font-weight: bold;text-align: right;\">\n" +
							username + "\n" +
							"<p style=\"width: 300px;background-color: #4CD964;text-align: right;margin-right: 40px;border-radius: 6px;\">\n" +
							msg + "\n" +
							"</p>\n" +
							"</div>\n" +
							"</div>";
					}

					//发送数据
					var hml = document.getElementById("msg-list").innerHTML;
					//数据追加
					document.getElementById("msg-list").innerHTML = hml + html;
					
					//拼接消息体
					var message = {
						"message": msg,
						"username": username,
						"to": "All",
						"fromImg" : user.minHeand
					}
					
					webSocket.send(JSON.stringify(message));
					
					//清空输入文本框的值
					$("#msg-text").val("");


				});
				
				mui(".wondie").on('tap', '.mui-media-object', function() {
					//获取id
					var username = this.getAttribute("username");
					// console.log(username);
					// plus.nativeUI.toast(username);
					mui.openWindow({
						url: 'friendAuth.html',
						id: 'friendAuth.html',
						extras: {
							name: username //自定义扩展参数，可以用来处理页面间传值
						}
					});
				});

			});
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="nickname">群聊</h1>
		</header>

		<!-- <div style="margin-top: 5px;"> -->
		<div class="mui-content" style="margin-top: 5px;">
			<div id='msg-list' class="wondie">
				<!-- <div class="mui-pull-left">
					<img style="width: 40px;height: 40px;" class="mui-media-object mui-pull-left" src="./img/tou.jpg">
					<div class="mui-media-body">
						<p style="color: #007AFF;font-weight: bold;text-align: left;">张三说:</p>
						<p style="width: 300px;background-color: #323232;margin-left: 40px;border-radius: 6px;">
							能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办?能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办?</p>
					</div>
				</div>
				<div class="mui-pull-left">
					<img style="width: 40px;height: 40px;" class="mui-media-object mui-pull-left" src="./img/tou.jpg">
					<div class="mui-media-body">
						<p style="color: #6D6D72;font-weight: bold;text-align: left;">张三说:</p>
						<p style="width: 300px;background-color: #323232;margin-left: 40px;border-radius: 6px;">
							能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办?能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办?</p>
					</div>
				</div>

				<div class="mui-pull-right">
					<img style="width: 40px;height: 40px;" class="mui-media-object mui-pull-right" src="./img/tou.jpg">
					<div class="mui-media-body">
						<p style="color: olive;font-weight: bold;text-align: right;">未进化的程序猿说:</p>
						<p
							style="width: 300px;background-color: #4CD964;color: #000000; right;margin-right: 40px;border-radius: 6px;">
							能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办?能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办?</p>
					</div>
				</div>

				<div class="mui-pull-right">
					<img style="width: 40px;height: 40px;" class="mui-media-object mui-pull-right" src="./img/tou.jpg">
					<div class="mui-media-body">
						<p style="color: #007AFF;font-weight: bold;text-align: right;">未进化的程序猿说:</p>
						<p
							style="width: 300px;background-color: #323232;text-align: right;margin-right: 40px;border-radius: 6px;">
							能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办?</p>
					</div>
				</div> -->
			</div>
		</div>
		<footer>
			<div class="footer-left">
				<i id='msg-image' class="mui-icon mui-icon-camera" style="font-size: 28px;"></i>
			</div>
			<div class="footer-center">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
				<button id='msg-sound' style="border: none;" class="footer-right">发送</button>
			</div>
			<!-- <label for="" class="footer-right">
					<i id='msg-type' >发送</i>
				</label> -->
		</footer>
		<!-- <div id='sound-alert' class="rprogress">
				<div class="rschedule"></div>
				<div class="r-sigh">!</div>
				<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>
			</div> -->
		<!-- </div> -->
	</body>

</html>
